fix(sidebar): give Ma musique + Playlists a shared scroll at 1080p#63
Conversation
Reported in #54 by jo-el414: on a 1080p screen with the Spotify shortcut enabled, the Playlists section in the sidebar collapsed to roughly the height of its section header — the user could not see "Recently played" or any real playlist row. With Spotify disabled the section grew enough to show one row at a time. Cause was the previous three-section layout inside a single `flex-1 overflow-hidden` container: Navigation and Ma musique both carried `shrink-0`, so their full 5-row + 2-row heights were pinned no matter the available space, leaving Playlists with only the leftover. On a 1080p / 125 % DPI display that leftover was zero. Restructure the sidebar into three zones with a single scroll boundary: - Fixed header : brand + profile (unchanged) - Fixed top nav : Home + Spotify (always reachable in one click) - Scroll surface: Ma musique + Playlists, sharing the remaining vertical space The pinned Liked / Recently-played rows and the real playlist list no longer live in their own nested `overflow-y-auto` — the outer scroll handles everything below the top nav. On a tall screen nothing changes visually because the content fits. On a short screen the user can simply scroll past Ma musique to reach Playlists.
|
Warning Rate limit exceeded
To continue reviewing without waiting, purchase usage credits in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
scope: frontend
1 participant
Summary
Partial fix for #54 — addresses sub-bugs A and B (sidebar usability at 1080p). The "Library crowded", "immersive visualizer overlap" and "README screenshots" parts of #54 remain.
Bug
Reported in #54 (screenshots in the issue):
Cause
Sidebar.tsxwrapped Navigation + Ma musique + Playlists in a singleflex-1 ... overflow-hiddencontainer. Navigation and Ma musique carriedshrink-0, pinning their full 2-row + 5-row heights. Playlists, withflex-1, only got the leftover — and on 1080p with 125 % DPI that leftover is zero or one row, depending on whether the Spotify shortcut is pinned.Fix
Restructure the sidebar into three zones with one shared scroll boundary:
The pinned Liked / Recently-played rows and the real playlist list no longer live in their own nested
overflow-y-auto. The outer surface handles everything below the top nav, so the user can simply scroll past Ma musique to reach the playlists when the viewport is short.On a tall screen nothing changes visually because everything fits.
Test plan
bun run typecheckbun run lint